<template>
	<view class="container">
		<scroll-view class="report-list" scroll-y="true" @scrolltolower="loadMoreReports"
			@refresherrefresh="onPullDownRefresh" refresher-enabled="true" refresher-triggered="{{isRefreshing}}"
			:refresher-threshold="80" :refresher-enabled="scrollTopPosition === 0">
			<view v-for="(report, index) in reports" :key="index"
				:class="getDepressionLevelClass1(report.depressionLevel)">
				<view class="report-info">
					<view :class="getDepressionLevelClass2(report.depressionLevel)">
						<view class="report-status">
							<text>抑郁程度:</text>
						</view>
						<view :class="getDepressionLevelClass3(report.depressionLevel)">
							<text>{{ report.depressionLevel }}</text>
						</view>
					</view>
					<view class="report-details">
						<view class="report-result">
							<view class="front">
								<text>抑郁得分:</text>
							</view>
							<view class="back">
								<text>{{ report.result }}分</text>
							</view>
						</view>
						<view class="report-evaluationtime">
							<view class="front">
								<text>测评时间:</text>
							</view>
							<view class="back">
								<text>{{ report.evaluationTime }}</text>
							</view>
						</view>
					</view>
					<view class="report-more">
						<!-- 更多选项按钮 -->
						<view class="options-button" @click="showOptions(index)">
							<text>· · ·</text>
						</view>
						<view class="detail-button-view">
							<!-- 查看详情按钮 -->
							<button class="detail-button" @click="viewDetails(report)">查看详情</button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isRefreshing: false, // 控制刷新状态
				fetchInterval: null, // 定时器 ID，用于清除定时器
				scrollTopPosition: 0, // 当前滚动位置
				reports: [{
						id: 1,
						result: 45, // 得分
						evaluationTime: '2024-01-15 14:30', // 测评时间
						depressionLevel: '轻度抑郁' // 根据得分计算出来的抑郁等级
					},
					{
						id: 2,
						result: 20, // 得分
						evaluationTime: '2024-01-10 16:45', // 测评时间
						depressionLevel: '没有抑郁' // 根据得分计算出来的抑郁等级
					},
					{
						id: 3,
						result: 75, // 得分
						evaluationTime: '2024-01-05 10:00', // 测评时间
						depressionLevel: '中度抑郁' // 根据得分计算出来的抑郁等级
					},
					{
						id: 4,
						result: 85, // 得分
						evaluationTime: '2024-01-01 18:20', // 测评时间
						depressionLevel: '重度抑郁' // 根据得分计算出来的抑郁等级
					}
				], // 存放从后端获取的抑郁历史报告数据
			};
		},
		mounted() {
			this.fetchReports(); // 页面加载时从后端获取数据
			this.fetchInterval = setInterval(() => {
				this.fetchReports();
			}, 10000); // 10000 毫秒，即 10 秒
		},
		beforeDestroy() {
			// 清除定时器，防止组件销毁后继续调用接口
			if (this.fetchInterval) {
				clearInterval(this.fetchInterval);
			}
		},
		methods: {
			updateScrollPosition(event) {
				this.scrollTopPosition = event.detail.scrollTop;
			},

			// 处理下拉刷新
			onPullDownRefresh() {
				if (this.scrollTopPosition === 0) { // 仅在顶部时触发刷新
					this.isRefreshing = true;
					this.fetchReports();
				}
			},
			// 从后端获取历史报告
			fetchReports() {
				const url = this.$globalData.history_url; // 替换为真实的后端接口
				uni.request({
					url: url,
					method: 'POST',
					data: {
						userId: this.$globalData.userID,
					},
					success: (res) => {
						// 检查响应的 code 是否为 200，表示成功
						if (res.data.code === 200) {
							// 假设后端返回的 report 数据格式为 res.data.data
							this.reports = res.data.data
								.filter(report => report.result !== null && report.result >= 0 && report
									.result <= 100) // 筛选出 result 在 0 到 100 之间的报告
								.map(report => {
									// 根据 result 分数计算抑郁程度等级
									report.depressionLevel = this.getDepressionLevel(report.result);
									return report;
								});
						} else {
							uni.showToast({
								title: '获取历史报告失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('获取历史报告失败: ', err);
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					},
					complete: () => {
						this.isRefreshing = false;
						uni.stopPullDownRefresh();
					}
				});
			},
			// 根据分数计算抑郁等级
			getDepressionLevel(score) {
				if (score <= 20) {
					return '没有抑郁';
				} else if (score <= 60) {
					return '轻度抑郁';
				} else if (score <= 80) {
					return '中度抑郁';
				} else {
					return '重度抑郁';
				}
			},
			// 查看详情
			viewDetails(report) {
				// 使用 uni.navigateTo 跳转到详情页面，并传递相关数据
				uni.navigateTo({
					url: `/pages/result/result?score=${report.result}`
				});
			},
			// 显示更多选项
			showOptions(index) {
				const report = this.reports[index];
				uni.showActionSheet({
					itemList: ['删除测评'],
					success: (res) => {
						if (res.tapIndex === 0) {
							this.deleteReport(index);
						}
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			getDepressionLevelClass3(depressionLevel) {
				if (depressionLevel === '没有抑郁') {
					return 'report-status-level1';
				} else if (depressionLevel === '轻度抑郁') {
					return 'report-status-level2';
				} else if (depressionLevel === '中度抑郁') {
					return 'report-status-level3';
				} else {
					return 'report-status-level4';
				}
			},
			getDepressionLevelClass1(depressionLevel) {
				if (depressionLevel === '没有抑郁') {
					return 'report-item1';
				} else if (depressionLevel === '轻度抑郁') {
					return 'report-item2';
				} else if (depressionLevel === '中度抑郁') {
					return 'report-item3';
				} else {
					return 'report-item4';
				}
			},
			getDepressionLevelClass2(depressionLevel) {
				if (depressionLevel === '没有抑郁') {
					return 'report-status-front1';
				} else if (depressionLevel === '轻度抑郁') {
					return 'report-status-front2';
				} else if (depressionLevel === '中度抑郁') {
					return 'report-status-front3';
				} else {
					return 'report-status-front4';
				}
			},
			// 删除报告并与后端对接
			deleteReport(index) {
				const report = this.reports[index];
				const url = this.$globalData.delete_url; // 替换为后端的删除接口

				uni.request({
					url: url,
					method: 'POST',
					data: {
						recordId: report.id // 传递需要删除的报告ID
					},
					success: (res) => {
						if (res.data.code === 200) {
							// 成功删除后，从列表中移除该报告
							this.reports.splice(index, 1);
							uni.showToast({
								title: '测评已删除',
								icon: 'success'
							});
						} else {
							uni.showToast({
								title: '删除失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						console.error('删除测评失败: ', err);
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			}
		}
	};
</script>

<style>
	.container {
		background-color: #f1f5f8;
		padding: 10px;
	}

	.report-list {
		margin-top: 10px;
	}

	.report-item1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin-bottom: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		border: 1px solid #0e0e0e;
	}

	.report-item2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin-bottom: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		border: 1px solid #19b1be;
	}

	.report-item3 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin-bottom: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		border: 1px solid #eebb44;
	}

	.report-item4 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin-bottom: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		border: 1px solid #c9736a;
	}

	.report-info {
		display: flex;
		flex-direction: column;
		padding: 10px;
		width: 100%;
	}

	.report-status-front1 {
		display: flex;
		margin-bottom: 5px;
		border-bottom: 0.5px solid #0e0e0e;
		align-items: center;
		width: 90%;
		padding-bottom: 10px;
	}

	.report-status-front2 {
		display: flex;
		margin-bottom: 5px;
		border-bottom: 0.5px solid #19b1be;
		align-items: center;
		width: 90%;
		padding-bottom: 10px;
	}

	.report-status-front3 {
		display: flex;
		margin-bottom: 5px;
		border-bottom: 0.5px solid #eebb44;
		align-items: center;
		width: 90%;
		padding-bottom: 10px;
	}

	.report-status-front4 {
		display: flex;
		margin-bottom: 5px;
		border-bottom: 0.5px solid #c9736a;
		align-items: center;
		width: 90%;
		padding-bottom: 10px;
	}

	.report-status {
		font-size: 16px;
		margin-right: 5px;
		color: #0e0e0e;
		font-weight: bold;
	}

	.report-status-level1 {
		font-size: 16px;
		color: #0e0e0e;
		font-weight: bold;
	}

	.report-status-level2 {
		font-size: 16px;
		color: #19b1be;
		font-weight: bold;
	}

	.report-status-level3 {
		font-size: 16px;
		color: #eebb44;
		font-weight: bold;
	}

	.report-status-level4 {
		font-size: 16px;
		color: #c9736a;
		font-weight: bold;
	}

	.report-details {}

	.report-result {
		margin-bottom: 10px;
		display: flex;
	}

	.report-evaluationtime {
		margin-bottom: 10px;
		display: flex;
	}

	.front {
		color: #656567;
		margin-right: 5px;
	}

	.back {
		color: #2b2b2c;
		margin-right: 5px;
	}

	.report-details {
		color: #2b2b2c;
	}

	.report-more {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;
		padding-right: 10px;
	}

	.detail-button {
		background-color: white;
		color: #0d0d0d;
		border-radius: 20px;
		border: 1px solid #b5b5b5;
		font-size: 14px;
	}

	.options-button {
		font-size: 14px;
		color: #999;
		display: flex;
		align-items: center;
	}
</style>